<template>
	<view>
		<u-toast ref="uToast" />
		<view class="comment">
			<text class="title" id="title">评论</text>
			<view class="column" v-for="(item, index) in commentList" :key="index">
				<view class="head"><image :src="item.authorAvatarUrl ? item.authorAvatarUrl : '../../static/icon/head_logo.png'" mode="aspectFill"></image></view>
				<view class="content">
					<text class="name">{{ item.authorNickname ? item.authorNickname : '' }}</text>
					<text class="detail">{{ item.content }}</text>
					<text class="time">{{ $u.timeFormat(item.createDateMs, 'yyyy-mm-dd  hh:MM') }}</text>
				</view>
			</view>
			<u-empty v-if="commentLength === 0" text="暂无评论" mode="message"></u-empty>
		</view>
		<view class="footer" :style="{ height: isIphoneX || isStartInput ? '150rpx' : '110rpx', bottom: height + 'px' }">
			<view class="content" :style="{ height: isStartInput ? '140rpx' : '110rpx' }">
				<u-icon name="edit-pen-fill" v-if="!isStartInput"></u-icon>
				<input type="text" placeholder="写评论..." :disabled="true" @tap="focus" v-if="!isStartInput" />
				<textarea
					cursor-spacing="80"
					@focus="areaFocus"
					@blur="areaBlur"
					:adjust-position="false"
					:show-confirm-bar="false"
					v-if="isStartInput"
					v-model="comment"
					placeholder="写评论..."
					:focus="true"
				/>
				<view class="comment-mark" @tap="scrollTo" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="!isStartInput">
					<u-icon name="chat" size="40"></u-icon>
					<u-badge type="warning" size="mini" :is-center="true" :count="commentLength"></u-badge>
				</view>
				<view class="comment-mark" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="saveCollect" v-if="!isStartInput">
					<u-icon :name="collect.liked ? 'thumb-up-fill' : 'thumb-up'" :color="collect.liked ? '#FED46B' : ''" size="40"></u-icon>
					<u-badge type="warning" size="mini" :is-center="true" :count="collect.count"></u-badge>
				</view>
				<view class="comment-mark" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-if="!isStartInput">
					<u-icon name="zhuanfa" size="40"></u-icon>
					<button open-type="share" style="opacity: 0;position: absolute;width: 50rpx;top: 0;">转发</button>
				</view>
				<view v-if="isStartInput" :style="{ color: comment ? '#3192FE' : '#EDECE8' }" @tap="commit" class="commit">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['scene', 'sceneId', 'scrollTop'],
	data() {
		return {
			commentList: [],
			collect: {
				count: 0,
				liked: false
			},
			isStartInput: false,
			height: 0,
			isIphoneX: this.config.isIphoneX,
			comment: ''
		}
	},
	watch: {
		sceneId: function() {
			this.getComment()
			this.getCollect()
		}
	},
	computed: {
		commentLength() {
			return this.commentList.length
		}
	},
	methods: {
		/**
		 *  获取评论数据
		 */
		getComment: async function() {
			const json = {
				deviceUuid: this.deviceUuid,
				scene: this.scene,
				sceneId: this.sceneId
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.getComment, json))
			this.commentList = data.comments.reverse()
		},
		/**
		 *  获取点赞数据
		 */
		getCollect: async function() {
			const json = {
				deviceUuid: this.deviceUuid,
				scene: this.scene,
				sceneId: this.sceneId
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.getCollect, json))
			this.collect = data
		},
		/**
		 *  输入框获取焦点
		 */
		focus: function() {
			this.isStartInput = true
		},
		areaFocus: function(event) {
			this.height = event.detail.height
		},
		areaBlur: function() {
			this.isStartInput = false
			this.height = 0
		},
		/**
		 *  提交评论
		 */
		commit: async function() {
			if (!this.comment) {
				this.$refs.uToast.show({
					title: '请输入评论内容',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			const json = {
				deviceUuid: this.deviceUuid,
				scene: this.scene,
				sceneId: this.sceneId,
				content: this.comment
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.addComment, json))
			if (err) {
				this.$refs.uToast.show({
					title: '网络请求失败',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			if (data.errorCode === 'hasIllegalContent') {
				this.$refs.uToast.show({
					title: '非法内容',
					type: 'error',
					duration: '2000'
				})
				return
			}
			this.comment = ''
			this.getComment()
		},
		/**
		 *  点赞
		 */
		saveCollect: async function() {
			this.collect.liked = !this.collect.liked
			this.collect.liked ? this.collect.count++ : this.collect.count--
			const json = {
				deviceUuid: this.deviceUuid,
				scene: this.scene,
				sceneId: this.sceneId,
				liked: this.collect.liked
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.saveCollect, json))
		},

		/**
		 *  滚动到评论区
		 */
		scrollTo: function() {
			this.length++
			const query = uni.createSelectorQuery().in(this)
			query
				.select('#title')
				.boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top + this.scrollTop,
						duration: 300
					})
				})
				.exec()
		}
	}
}
</script>

<style lang="stylus">
.comment
	display flex
	flex-direction column
	padding-bottom 160rpx
	.title
		font-size 40rpx
		margin-left 25rpx
		font-weight bold
	.column
		display flex
		width 700rpx
		margin 25rpx
		flex-wrap wrap
		.head
			width 100rpx
			height 100rpx
			border-radius 50%
			overflow hidden
			transform translate3d(0, 0, 0)
			border 3rpx solid white
			box-shadow 1rpx 1rpx 3rpx #C3C3C3
			image
				width 100%
				height 100%
		.content
			display flex
			flex-direction column
			width 500rpx
			padding-left 15rpx
			box-sizing border-box
			.name
				font-size 25rpx
				margin-top 10rpx
				color #FFA622
			.detail
				font-size 28rpx
				margin-top 10rpx
				width 500rpx
			.time
				font-size 20rpx
				margin-top 10rpx
				color #767676
.footer
	position fixed
	bottom 0
	width 100vw
	background white
	border-top 2rpx solid #EDECE8
	.content
		height 90rpx
		display flex
		align-items center
		font-size 30rpx
		padding-left 30rpx
		box-sizing border-box
		input
			width 400rpx
			height 65rpx
			margin-left 10rpx
			background #ebeef5
			border-radius 40rpx
			padding-left 15rpx
			box-sizing border-box
		textarea
			width 500rpx
			height 110rpx
			border-radius 10rpx
			background #ebeef5
			margin-left 10rpx
			padding 10rpx
			box-sizing border-box
		.commit
			width 100rpx
			height 110rpx
			line-height 110rpx
			text-align center
			font-size 30rpx
			margin-left 50rpx
			font-weight 800
		.comment-mark
			margin-left 40rpx
			position relative
			width 40rpx
			height 40rpx
			transition all 0.3s
</style>
